<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="UTF-8">
		<title>index</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
		<link rel="shortcut icon" href="images/favicon.png">
		<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
		<link href="jqueryMobile/jquery.mobile.theme-1.3.1.css" rel="stylesheet">
		<link href="jqueryMobile/jquery.mobile.structure-1.3.1.css" rel="stylesheet">
		<link href="jqueryMobile/jquery.mobile-1.3.1.css" rel="stylesheet">
		<link rel="stylesheet" href="css/main.css">
		<script>window.$ = window.jQuery = WLJQ;</script>
		<script src="jqueryMobile/jquery.mobile-1.3.1.js"></script>
		
		
		<!--  <link href="stylesheets/custom.css" media="screen" rel="stylesheet" type="text/css" />-->
		
		<!--  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,800">-->
		<link href="stylesheets/application.css" media="screen" rel="stylesheet" type="text/css" />
		<!--  <script src="javascripts/application.js" type="text/javascript"></script>-->
	</head>
	<body style="display: none;">
    <div data-role="page" id="loginPage">
		<div data-role="content" style="padding: 15px">
			<div style="text-align:center;vertical-align: middle;margin-top: 50px;"><img src='images/customer.jpg' alt="take photo" width="150"/></div>
			<div class="login box" style="margin-top: 20px;">
	            <div class="box-header">
					<span class="title">Login</span>
				</div>
				<div class="box-content padded">
					<label for="un" class="ui-hidden-accessible">License Plate:</label>
          			<input type="text" name="user" id="licensePlateInp" value="" placeholder="License Plate No." data-theme="a">

					<label for="pw" class="ui-hidden-accessible">Password:</label>
          			<input type="password" name="pass" id="passwordInp" value="" placeholder="Password" data-theme="a">

					<button id="loginBtn" data-theme="b"><i class="icon-signin"></i> Log in</button>
				</div>
			</div>
	        <!--  <div style="padding:10px 20px;">
	             <h3>Please sign in</h3>
	            <label for="un" class="ui-hidden-accessible">License Plate:</label>
	            <input type="text" name="user" id="licensePlateInp" value="" placeholder="License Plate No." data-theme="a">
	            <label for="pw" class="ui-hidden-accessible">Password:</label>
	            <input type="password" name="pass" id="passwordInp" value="" placeholder="Password" data-theme="a">
	            <button id="loginBtn" data-theme="b" data-icon="action"></i> Log in</button>
			</div>-->
			<!--<div class="padded">
				<div class="login box" style="margin-top: 80px;">
					<div class="box-header">
						<span class="title">Login</span>
					</div>

					<div class="box-content padded">
						<form class="separate-sections">
							<div class="input-group addon-left">
								<span class="input-group-addon" href="#"> <i
									class="icon-user"></i>
								</span> <input type="text" placeholder="username">
							</div>

							<div class="input-group addon-left">
								<span class="input-group-addon" href="#"> <i
									class="icon-key"></i>
								</span> <input type="password" placeholder="password">
							</div>

							<div>
								<a class="btn btn-blue btn-block"> Login <i
									class="icon-signin"></i>
								</a>
							</div>
						</form>
					</div>
				</div>-->
		</div>
	</div>
	<div data-role="page" id="customerInfoPage">
		<div data-role="header" id="header0" data-position="fixed">
			<h3><font color="white">Easy Claim</font></h3>
			<a href="#loginPage" data-role="button" id="logoutBtn" class="ui-btn-right" data-theme="b"><i class="icon-off"></i></a>
		</div>
		<div data-role="content" style="padding: 15px">
			<div class="ui-bar" style="background-color: #C2B36E">
	    		<h3><font color="white">Customer Information</font></h3>
			</div>
			
			<div data-role="fieldcontain">
		         <img id="carImageInfo" src='' alt="car's image" width='290px' style='display:block'/>
    		</div>
    		<div data-role="fieldcontain">
		         <label for="licenseplate">License Plate:</label>
		         <input type="text" data-mini="true" name="licenseplate" id="licenseplateInfo" value="" readonly>
    		</div>
    		<div data-role="fieldcontain">
		         <label for="name">Name:</label>
		         <input type="text" data-mini="true" name="name" id="nameInfo" value="" readonly>
    		</div>
    		<div data-role="fieldcontain">
		         <label for="cardetail">Car Detail:</label>
		         <input type="text" data-mini="true" name="cardetail" id="cardetailInfo" value="" readonly>
    		</div>
    		<div data-role="fieldcontain">
		         <label for="mobile">Mobile:</label>
		         <input type="text" data-mini="true" name="mobile" id="mobileInfo" value="" readonly>
    		</div>
		</div>
		<div data-role="footer" data-position="fixed">
			<div data-role="navbar">
				<ul>
					<li><a href="#customerInfoPage" class="ui-btn-active ui-state-persist"><i class="icon-user-md"></i></a></li>
					<li><a href="#claimRequestPage"><i class="icon-plus-sign-alt"></i></a></li>
					<li><a href="#claimListPage"><i class="icon-th-list"></i></a></li>
					<!--<li><a href="#claimDetailPage"><i class=" icon-hand-right"></i></a></li>-->
				</ul>
			</div>
		</div>  
	</div>
	<div data-role="page" id="claimRequestPage">
		<div data-role="header" id="header0" data-position="fixed">
			<h3><font color="white">Easy Claim</font></h3>
			<a href="#loginPage" data-role="button" id="logoutBtn" class="ui-btn-right" data-theme="b"><i class="icon-off"></i></a>
		</div>
		<div data-role="content" style="padding: 15px">
			<div class="ui-bar" style="background-color: #C2B36E">
	    		<h3><font color="white">Claim Request</font></h3>
			</div>
			<div data-role="fieldcontain">
		         <label for="licenseplate">License Plate:</label>
		         <input type="text" data-mini="true" name="licenseplate" id="licenseplateRequest" value="" readonly>
    		</div>
    		<div data-role="fieldcontain">
		         <label for="name">Name:</label>
		         <input type="text" data-mini="true" name="name" id="nameRequest" value="" readonly>
    		</div>
    		<div data-role="fieldcontain">
		         <label for="cardetail">Car Detail:</label>
		         <input type="text" data-mini="true" name="cardetail" id="cardetailRequest" value="" readonly>
    		</div>
    		<div data-role="fieldcontain">
		         <label for="mobile">Mobile:</label>
		         <input type="text" data-mini="true" name="mobile" id="mobileRequest" value="" readonly>
    		</div>
    		<!-- <div data-role="fieldcontain">
		         <label for="status">Status:</label>
		         <input type="text" data-mini="true" name="status" id="status" value="" readonly>
    		</div>-->
    		<div data-role="fieldcontain">
		    	<label for="image">Image: </label>
		         
                <a data-role="button" data-inline="true" id="takePhotoBtn">
                	<img src='images/camera.png' alt="take photo"/>
              	</a>
    		</div>
    		<div class="capturedImage"  id="capturedImage" style="text-align: center;">				
				<img id='captareImageRequest' src='images/captureimage.png' width='290px' style='display:block'>
			</div>
			
			<div class="ui-grid-a">
				<div class="ui-block-a">
					<input id="sendRequest" type="submit" value="Send" />
				</div>
				<div class="ui-block-b">
					<input id="cancelRequest" type="button" value="Cancel" />
				</div>
			</div>
		</div>
		<div data-role="footer" data-position="fixed">
			<div data-role="navbar">
				<ul>
					<li><a href="#customerInfoPage"><i class="icon-user-md"></i></a></li>
					<li><a href="#claimRequestPage" class="ui-btn-active ui-state-persist"><i class="icon-plus-sign-alt"></i></a></li>
					<li><a href="#claimListPage"><i class="icon-th-list"></i></a></li>
					<!--<li><a href="#claimDetailPage"><i class=" icon-hand-right"></i></a></li>-->
				</ul>
			</div>
		</div>
	</div>
	<div data-role="page" id="claimListPage">
		<div data-role="header" id="header0" data-position="fixed">
			<h3><font color="white">Easy Claim</font></h3>
			<a href="#loginPage" data-role="button" id="logoutBtn" class="ui-btn-right" data-theme="b"><i class="icon-off"></i></a>
		</div>
		<div data-role="content" style="padding: 15px">
			<div class="ui-bar" style="background-color: #C2B36E">
	    		<h3><font color="white">Claim List</font></h3>
			</div>
			
			<ul id="claimInfoListView" data-role='listview' data-inset='true' data-theme='b'
				data-split-theme='e' data-split-icon='arrow-d'>
				<!--  <li>
					<a href='#viewphoto' data-rel='dialog'>
					<img style='margin: 10px' src=''  width="60px"/>
					<h3>Id : </h3>
					<p>Date :</p>
					<p>Status :</p>
					</a>
					<a href='#' data-rel='dialog'></a>
				</li>
				<li>
					<a href='#viewphoto' data-rel='dialog'>
					<img style='margin: 10px' src='' width="60px"/>
					<h3>Id : </h3>
					<p>Date :</p>
					<p>Status :</p>
					</a>
					<a href='#' data-rel='dialog'></a>
				</li>-->
			</ul>
			
			<!--  <div style="text-align: center;">
					<a data-role="button" data-inline="true" id="syncBtn">
                	<img src='images/sync.png' alt="sync photo" width="50"/>
            		</a>
			</div>-->
		</div>
		<div data-role="footer" data-position="fixed">
			<div data-role="navbar">
				<ul>
					<li><a href="#customerInfoPage"><i class="icon-user-md"></i></a></li>
					<li><a href="#claimRequestPage"><i class="icon-plus-sign-alt"></i></a></li>
					<li><a href="#claimListPage" class="ui-btn-active ui-state-persist"><i class="icon-th-list"></i></a></li>
					<!--<li><a href="#claimDetailPage"><i class=" icon-hand-right"></i></a></li>-->
				</ul>
			</div>
		</div>
	</div>
	<div data-role="page" id="claimDetailPage">
		<div data-role="header" id="header0" data-position="fixed">
			<a href="#claimListPage" data-role="button" id="logoutBtn" data-theme="b"><i class="icon-reply"></i></a>
			<h3><font color="white">Easy Claim</font></h3>
			<a href="#loginPage" data-role="button" id="logoutBtn" class="ui-btn-right" data-theme="b"><i class="icon-off"></i></a>
		</div>
		<div data-role="content" style="padding: 15px">
			<div class="ui-bar" style="background-color: #C2B36E">
	    		<h3><font color="white">Claim Detail</font></h3>
			</div>
			<div data-role="fieldcontain">
		         <label for="claimidDetail">Claim Id:</label>
		         <input type="text" data-mini="true" name="claimidDetail" id="claimidDetail" value="" readonly>
    		</div>
    		<div data-role="fieldcontain">
		         <label for="locationDetail">Location:</label>
		         <input type="text" data-mini="true" name="locationDetail" id="locationDetail" value="" readonly>
    		</div>
    		<div data-role="fieldcontain">
		         <label for="dateDetail">Date:</label>
		         <input type="text" data-mini="true" name="dateDetail" id="dateDetail" value="" readonly>
    		</div>
    		<div data-role="fieldcontain">
    			<label for="surveyornameDetail">Surveyor Name:</label>
		         <input type="text" data-mini="true" name="surveyornameDetail" id="surveyornameDetail" value="" readonly>
    		</div>
    		<div data-role="fieldcontain">
		         <label for="surveyormobileDetail">Surveyor Mobile:</label>
		         <input type="text" data-mini="true" name="surveyormobileDetail" id="surveyormobileDetail" value="" readonly>
    		</div>
    		<div data-role="fieldcontain">
		         <label for="statusDetail">Status:</label>
		         <input type="text" data-mini="true" name="statusDetail" id="statusDetail" value="" readonly>
    		</div>
    		<div class="capturedImage"  id="surveyorImage" style="text-align: center;">				
				<img id='surveyorImageDetail' src='images/captureimage.png' height='190px' width='290px' style='display:block'>
			</div>
			<div style="text-align: center;">
				<a data-role="button" data-inline="true" id="LocationBtn">
               	<img src='images/location.png' alt="location" width="50"/>
           		</a>
			</div>
		</div>
		<div data-role="footer" data-position="fixed">
			<div data-role="navbar">
				<ul>
					<li><a href="#customerInfoPage"><i class="icon-user-md"></i></a></li>
					<li><a href="#claimRequestPage"><i class="icon-plus-sign-alt"></i></a></li>
					<li><a href="#claimListPage" class="ui-btn-active ui-state-persist"><i class="icon-th-list"></i></a></li>
					<!--<li><a href="#claimDetailPage"><i class=" icon-hand-right"></i></a></li>-->
				</ul>
			</div>
		</div>
	</div>
	
	<div data-role="page" id="claimMapPage">
		<div data-role="header" id="header3" data-position="fixed">
			<h3>Easy Claim</h3>
			<a href="#loginPage" data-role="button" id="logoutBtn" class="ui-btn-right">Logout</a>
		</div>
		<div data-role="content" id="map-canvas" style="padding: 15px">
			
		</div>
		<div data-role="footer" data-position="fixed">
			<div data-role="navbar">
				<ul>
					<li><a href="#customerInfoPage"><i class="icon-user-md"></i></a></li>
					<li><a href="#claimRequestPage"><i class="icon-plus-sign-alt"></i></a></li>
					<li><a href="#claimListPage" class="ui-btn-active ui-state-persist"><i class="icon-th-list"></i></a></li>
					<!--<li><a href="#claimDetailPage"><i class=" icon-hand-right"></i></a></li>-->
				</ul>
			</div>
		</div>
	</div>
	<script src="js/memoryStore.js"></script>
	<script src="js/initOptions.js"></script>
    <script src="js/main.js"></script>
    <script src="js/messages.js"></script>
    </body>
</html>